<template>
    <div class="album banxin">
        <div class="album_in">
            <!-- 标题 -->
            <div class="titles tanxin">
                <h2>热门新碟</h2>
                <div class="more">
                    <a @click="moreClick()">更多</a>
                    <img src="../../assets/images/jiantou.png" alt="" />
                </div>
            </div>
            <!-- 热门新碟列表 -->
            <div class="album_list">
                <ul>
                    <li v-for="(item, index) in HotList" :key="index">
                        <div class="info" @click="$router.push(`/albumlist/${item.id}`)">
                            <img :src="item.picUrl" alt="" style="width:130px;">
                            <i :title="item.name" class="mask"></i>
                            <div class="show">
                                <i class="play"></i>
                            </div>
                        </div>
                        <p :title="item.name" class="dec ellipsis" @click="$router.push(`/albumlist/${item.id}`)">{{ item.name }}</p>
                        <span :title="item.artist.name" class="name" @click="$router.push(`/artlist/${item.artist.id}`)">{{ item.artist.name }}</span>
                    </li>
                </ul>
            </div>
            <!-- 标题 -->
            <div class="titles tanxin">
                <h2>数字新碟</h2>
                <div class="more">
                    <a @click="moreClick()">更多</a>
                    <img src="../../assets/images/jiantou.png" alt="" />
                </div>
            </div>
            <!-- 数字新碟列表 -->
            <div class="album_list">
                <ul>
                    <li v-for="(item, index) in NumList" :key="index">
                        <div class="info" @click="$router.push(`/albumlist/${item.albumId}`)">
                            <img :src="item.coverUrl" alt="" style="width:130px;">
                            <i :title="item.albumName" class="mask"></i>
                            <div class="show">
                                <i class="play"></i>
                            </div>
                        </div>
                        <p :title="item.albumName" class="dec ellipsis" @click="$router.push(`/albumlist/${item.albumId}`)">{{ item.albumName }}</p>
                        <span :title="item.artistName" class="name" @click="ArtistFn(item)">{{ item.artistName }}</span>
                    </li>
                </ul>
            </div>
            <!-- 标题 -->
            <div class="titles tanxin" id="more">
                <div class="title_l tanxin">
                    <h2>{{ isAll ? '全部新碟' : '新碟上架' }}</h2>
                    <ul class="tanxin">
                        <li v-for="(item, index) in Album" :key="index" @click="Go(item)">{{ item.name }}</li>
                    </ul>
                </div>
                <div class="more" @click="isAll=!isAll" v-show="!isAll">
                    <a>全部</a>
                    <img src="../../assets/images/jiantou.png" alt="" />
                </div>
                <div class="more" @click="isAll=!isAll" v-show="isAll">
                    <a>更多</a>
                    <img src="../../assets/images/jiantou.png" alt="" />
                </div>
            </div>
            <!-- 全部新碟 -->
            <div v-show="isAll">
                <AllAlbum :albumlist="AlbumList" />
            </div>
            <!-- 新碟上架 -->
            <div v-show="!isAll">
                <LoadMore :bigarr="NewList" :size="10">
                   <NewAlbum slot-scope="scope" :newlist="scope.samllarr" />
                </LoadMore>
                <!-- <NewAlbum :newlist="NewList" /> -->
            </div>
            <!-- 分页列表 -->
            <div class="select_list" v-show="isAll">
                <ul class="select tanxin">
                    <li @click="upFn" :class="{'active': navActive==0}">上一页</li>
                    <li v-for="(item, index) in number" :key="index" :class="{'active':item == $route.query.offset / 30 + 1 }" @click="Select(item)">{{ item }}</li>
                    <li @click="nextFn" :class="{'active': navActive==1}">下一页</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import NewAlbum from "../Album/NewAlbum.vue";
import AllAlbum from "../Album/AllAlbum.vue";
import { HotAlbumApi, NumAlbumApi, NewAlbumApi, AlbumApi, AlbumDetailApi } from "@/request/api";
export default {
    data () {
        return {
            HotList: "",
            NumList: "",
            NewList: "",
            AlbumList: "",
            Album: [
                {name:"全部", area:'ALL'},
                {name:"华语", area:'ZH'},
                {name:"欧美", area:'EA'},
                {name:"韩国", area:'KR'},
                {name:"日本", area:'JP'},
            ],
            number: [1,2,3,4,5,6,7,8,9,10],
            navActive: 0,
            isAll: true,
        }
    },
    components: {
        NewAlbum,
        AllAlbum,
    },
    created() {
        // 获取热门新碟
        HotAlbumApi().then((res) => {
            // console.log(res);
            this.HotList = res.data.albums.slice(0, 10);
        });
        // 获取数字新碟
        NumAlbumApi().then((res) => {
            // console.log(res);
            this.NumList = res.data.products;
        })
        // 获取新碟上架
        NewAlbumApi({
            area: this.area,
            offset: this.offset
        }).then((res) => {
            // console.log(res);
            this.NewList = res.data.monthData.slice(0, 30);
        })
        // 获取全部新碟
        AlbumApi({
            area: this.area,
            offset: this.offset
        }).then((res) => {
            // console.log(res);
            this.AlbumList = res.data.albums;
        })
    },
    computed: {
        area() {
            if (this.$route.query.area == undefined) return 'ALL';
            return this.$route.query.area;
        },
        offset() {
            if (this.$route.query.offset == undefined) return 0;
            return this.$route.query.offset;
        }
    },
    methods: {
        // 锚点跳转
        moreClick() {
            document.querySelector('#more').scrollIntoView({
                // 定义动画过渡效果
                behavior: "smooth",
                // 定义垂直方向的对齐
                block: "center",
                // 定义水平方向的对齐
                inline: "nearest"
            })
        },
        // 点击进入歌手详情
        ArtistFn(item) {
            AlbumDetailApi(item.albumId).then((res) => {
                // console.log(res);
                return this.$router.push(`/artlist/${res.data.album.artist.id}`);
            });
        },
        Go(item) {
            this.$router.push({
                path: "/discover/album",
                query: {
                    area: item.area,
                    offset: 0,
                }
            });
            this.$router.go(0);
            this.moreClick();
        },
        Select(item) {
            this.$router.push({
                path: "/discover/album",
                query: {
                    area: this.area,
                    offset: (item-1)*30,
                }
            });
            this.$router.go(0);
        },
        upFn() {
            this.navActive = 0;
            this.$router.push({
                path: "/discover/album",
                query: {
                    area: this.area,
                    offset: (this.offset/30 - 1)*30,
                }
            })
            this.$router.go(0);
        },
        nextFn() {
            this.navActive = 1;
            this.$router.push({
                path: "/discover/album",
                query: {
                    area: this.area,
                    offset: (this.offset/30 + 1)*30,
                }
            })
            this.$router.go(0);
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.album_in {
    width: 900px;
    background-color: #fff;
    border: 1px solid #D7D7D7;
    padding: 40px;
    .titles {
        height: 40px;
        width: 100%;
        border-bottom: 2px solid @red;
        display: flex;
        align-items: center;
        h2 {
            font-size: 24px;
            color: #333;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
        ul {
            display: flex;
            align-items: center;
            li {
                cursor: pointer;
                font-size: 12px;
                color: #666;
                border-right: 1px solid #666;
                padding: 0 15px;
                &:last-of-type {
                    border: none;
                }
                &:hover {
                    text-decoration: underline;
                    color: #666;
                }
            }
        }
        .more {
            cursor: pointer;
            a {
                font-size: 12px;
                color: #666;
                &:hover {
                    text-decoration: underline;
                }
            }
            img {
                margin: auto;
                padding: 0 5px;
            }
        }
    }
    .album_list {
        ul {
            flex-wrap: wrap;
            display: flex;
            justify-content: space-between !important;
            padding-bottom: 30px;
        }
        li {
            cursor: pointer;
            width: 160px;
            height: 180px;
            margin-top: 20px;
            line-height: 1.5;
            &:nth-of-type(5n) {
                margin-right: 0;
            }
            .info {
                position: relative;
                height: 130px;
                width: 160px;
                overflow: hidden;
                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 130px;
                    width: 160px;
                    display: block;
                    background: url("../../assets/images/public/coverall.png") no-repeat 0px -845px;
                }
                &:hover {
                    .show {
                        display: block;
                    }
                    img {
                        transform: scale(1.1);
                    }
                }
                .show {
                    display: none;
                    i {
                        position: absolute;
                        bottom: 5px;
                        right: 40px;
                        height: 30px;
                        width: 30px;
                        display: block;;
                        float: right;
                        background: url("../../assets/images/public/iconall.png") no-repeat;
                    }
                    .play {
                        background-position: 0px -140px;
                        &:hover {
                            background-position: 0px -170px;
                        }
                    }
                }
            }
            .dec {
                width: 100%;
                font-size: 14px;
                color: #000;
                &:hover {
                    text-decoration: underline;
                }
            }
            .name {
                font-size: 12px;
                color: #666;
                &:hover {
                    text-decoration: underline;
                    color: #666;
                }
            }
        }
    }
    .select_list {
        .select {
            display: flex;
            justify-content: center !important;
            margin: 20px;
            li {
                width: 21px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                font-size: 14px;
                color: #333;
                border: 1px #cacaca solid;
                border-radius: 2px;
                margin: 0 5px;
                &:hover {
                    cursor: pointer;
                    border: 1px #333 solid;
                }
                &:first-of-type {
                    width: 90px;
                }
                &:last-of-type {
                    width: 90px;
                }
            }
            .active {
                background: #c20c0c;
                // background: @red;
                border-radius: 2px;
                color: #fff;
            }
        }
    }
}
</style>